<template>
  <div class="bg_F4F6F9 login_page">
    <div class="width_1180 revise_page_body bg_fff" :style="{height:winHeight - 149 + 'px'}">
      <div class="login_body">
        <!--top-->
        <div class="login_top row">
          <div class="login_title col-md-6 font_18 col_2577EF text-left">修改密码</div>
        </div>
        <!--列表表单-->
        <ul class="login_form_list clear">
          <li class="text-left clear">
            <div class="form_list_label float_left">手机号码</div>
            <div class="form_list_input float_left"><input type="text" class="col_aaa tel_inp" placeholder="请输入手机号码"></div>
          </li>
          <li class="text-left clear">
            <div class="form_list_label float_left">旧密码</div>
            <div class="form_list_input float_left"><input type="password" id="old_password" class="col_aaa" placeholder="请输入密码"></div>
            <div class="password_box_width text-right font_14 float_left pointer">
              <span class="glyphicon icon_hide_password" id="old_hide_eye" aria-hidden="true" @click="old_hide_password" v-if="eye_show_old"></span>
              <span class="glyphicon icon_show_password" id="old_show_eye" aria-hidden="true" @click="old_show_password" v-else></span>
            </div>
          </li>
          <li class="text-left clear">
            <div class="form_list_label float_left">新密码</div>
            <div class="form_list_input float_left"><input type="password" id="new_password" class="col_aaa" placeholder="6-16位字符"></div>
            <div class="password_box_width text-right font_14 float_left pointer">
              <span class="glyphicon icon_hide_password" id="new_hide_eye" aria-hidden="true" @click="new_hide_password" v-if="eye_show_new"></span>
              <span class="glyphicon icon_show_password" id="new_show_eye" aria-hidden="true" @click="new_show_password" v-else></span>
            </div>
          </li>
        </ul>
        <div class="font_16 color_FF5151 margin_top_20" id="err_txt"></div>
        <button type="button" class="login_btn revise_btn bg_2577EF font_16 col_fff" @click="sub_revise_password">确认修改</button>
      </div>
    </div>
    <!--底部页脚-->
    <smFoot></smFoot>
  </div>
</template>

<script>
  import smFoot from '@/components/foot/sm_foot'
  //抛出
  export default {
    name: 'login',
    data(){
      return {
        eye_show_old: true,
        eye_show_new: true,
        winHeight: ''
      }
    },
    //注册组件
    components: {
        smFoot
    },
    methods: {
      /**
       * 新 / 旧密码点击显示/隐藏
       *
       */
      old_hide_password(){
          this.eye_show_old = false;
        $("#old_password").attr("type", "text");
      },
      old_show_password(){
        $("#old_password").attr("type", "password");
        this.eye_show_old = true;
      },
      new_hide_password(){
        $("#new_password").attr("type", "text");
        this.eye_show_new = false;
      },
      new_show_password(){
        $("#new_password").attr("type", "password");
        this.eye_show_new = true;
      },

      /**
       * 提交修改密码
       */
      sub_revise_password(){
        let that = this;
        let tel_inp = $(".tel_inp").val();
        let old_password_val = $("#old_password").val();
        let new_password_val = $("#new_password").val();
        let regx = /[\u4E00-\u9FA5]/;//匹配中文正则
        let regx_s = /^\s+|\s+$/g;//匹配空格

        if (this.checkStringNull(tel_inp)) {
          $("#err_txt").text("手机号码不能为空！");
        } else if (this.checkStringNull(new_password_val)) {
          $("#err_txt").text("密码不能为空！");
        }else if (regx.test(new_password_val)) {
          $("#err_txt").text("密码不能使用中文！");
        } else if (regx_s.test(new_password_val)) {
          $("#err_txt").text("密码不能使用空格！");
        } else {
          $("#err_txt").text("");
          /**
           * 验证完成提交表单并跳转到登陆页面
           * **/
          that.base.ajax_post('/site/new/reset/password', {"pwd_new":new_password_val,"pwd_old":old_password_val,"phone":tel_inp}, function (data) {
            if (data.status == 0) {
                window.location.href = 'http://cas.xuemei99.com/web/cas/login?service=https%3A%2F%2Fwww.xuemei99.com%2Fweb%2Flogin%2F%3Fnext%3D%252F';
//              this.$router.push({path: '/login'})
            } else {
              alert(data.detail)
            }
          })
        }
      }
    },
    //在模板渲染之前调用
    created (){

    },
    //在模板渲染之后调用
    mounted () {
        //计算视窗高
        let window_height = document.documentElement.clientHeight;
        this.winHeight = window_height;
        $("body").css({"height":window_height,"backgroundColor":"#F4F6F9"});
    },
  }


</script>

<style scoped>
  .login_page{
    border: 1px solid rgba(255,255,255,0);
  }
  .revise_page_body{
    border: 1px solid rgba(255,255,255,0);
    margin: 12px auto;
    position: relative;
  }
  .login_top{
    margin: 0;
  }
  .login_title,.register_btn{
    padding: 0;
  }
  .login_body{
    position: relative;
    width: 380px;
    height: 488px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 4px;
  }
  .login_form_list{
    margin: 0;
    padding: 0;
  }
  .login_form_list li{
    width: 100%;
    border-bottom: 1px solid #EAECEF;
    margin-top: 40px;
    padding-bottom: 10px;
  }
  .form_list_label{
    width: 86px;
    font-size: 14px;
  }
  .form_list_input{
    width: calc(100% - 86px);
  }
  .form_list_input input{
    border: none;
    outline: none;
  }
  .login_btn{
    border-radius: 4px;
    width: 320px;
    height: 48px;
    line-height: 48px;
  }
  .revise_btn{
    margin-top: 30px;
  }
  .password_box_width{
    position: absolute;
    right: 30px;
  }

</style>
